<template>
    <div class="common-layout">
        <el-container>
            <el-header>
            <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                <span class="title">Wang Wang Yang</span>
            </el-header>
            <el-main>
                <el-card class="sign_up_card">

                    <el-form :model="form" label-width="80px">
                        <el-form-item label="Name">
                            <el-input v-model="form.name" placeholder="name"/>
                        </el-form-item>
                        <el-form-item label="Email">
                            <el-input v-model="form.email" placeholder="email"/>
                        </el-form-item>
                        <el-form-item label="Telephone">
                            <el-input v-model="form.telephone" placeholder="telephone"/>
                        </el-form-item>
                        <el-form-item label="Password">
                            <el-input type="password" v-model="form.password" placeholder="password"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit()">sign up</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-main>
            <el-footer>&copy;2023 by Wang Wang Yang<sup>&reg;</sup></el-footer>
        </el-container>
    </div>
</template>

<script setup>
import {reactive} from "vue";
import axios from 'axios'
import router from '../router/index.js'
import {ElMessage} from "element-plus";


const form = reactive({
    name: '',
    email: '',
    telephone: '',
    password: ''
})

const onSubmit = () => {
    console.log(form)
    axios.post('http://localhost:8080/manager/create',form)
        .then(res => {
            console.log(res.data)
            if(res.data){
                router.push('/Home');
            }else {
                ElMessage.error('Invalid account or password')
            }
        }).catch(err => {
        console.error(err)
    })
}
</script>


<style scoped>
.common-layout{
    height: 100vh;
}

.el-header{
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
}

.el-container{
    background: url("../assets/vue.svg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-container.is-vertical{
    height: 100%;
}

.el-icon{
    color: orangered;
}

.icon{
    display: inline-block;
    vertical-align: middle;/*垂直方向居中对齐*/
}

.title{
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px;/* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.sign_up_card{
    margin: 80px 100px;
    width: 25%;
    border-radius: 10px;
    opacity: .8;
}

.el-footer{
    color: #f9f9f9;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: rgba(33, 33, 33, .8);
}
</style>
